一.垂直對齊父元素

<div class="container" id="demo">
  <div class="row align-items-start">
    <div class="col-4"><span>1</span></div>
    <div class="col-4"><span>2</span></div>
    <div class="col-4"><span>3</span></div>
  </div>
  <div class="row align-items-center">
    <div class="col-4"><span>1</span></div>
    <div class="col-4"><span>2</span></div>
    <div class="col-4"><span>3</span></div>
  </div>
  <div class="row align-items-end">
    <div class="col-4"><span>1</span></div>
    <div class="col-4"><span>2</span></div>
    <div class="col-4"><span>3</span></div>
  </div>
</div>

#demo.container,
#demo.container-fluid{
  background: #054bd1;/*藍*/
  height: 100vh;
  color: white;
}

#demo.container .row{
  background: #021d51;/*深藍*/
  boder-bottom: 1px solid #000;
  height: 30vh;
}

#demo.container .row > div > span{
  display: block;
  background: #487bdd;/*淺藍*/
  color: white;
  font-size: 32px;
  padding: 8px;
  border: 1px solid #021d51;/*深藍*/
}

重點：
1.先設定row的高度
2.父元素垂直對齊上(align-items-start)
3.父元素垂直對齊中(align-items-center)
4.父元素垂直對齊下(align-items-end)

codepen

二.垂直對齊單一row裡面的col

<!-- 先設定row的高度 -->
<div class="container" id="demo">
<!--   父元素垂直對齊上 -->
  <div class="row align-items-center">
    <div class="col-4 align-self-start"><span>1</span></div>
    <div class="col-4 align-self-center"><span>2</span></div>
    <div class="col-4 align-self-end"><span>3</span></div>
  </div>
</div>


#demo.container,
#demo.container-fluid{
  background: #054bd1;/*藍*/
  height: 100vh;
  color: white;
}

#demo.container .row{
  background: #021d51;/*深藍*/
  boder-bottom: 1px solid #000;
  height: 30vh;
}

#demo.container .row > div > span{
  display: block;
  background: #487bdd;/*淺藍*/
  color: white;
  font-size: 32px;
  padding: 8px;
  border: 1px solid #021d51;/*深藍*/
}

重點：
1.先設定row的高度
2.col垂直對齊上(align-self-start)
3.col垂直對齊中(align-self-center)
4.col垂直對齊下(align-self-end)
5.影片中的row有加align-items-center，在Bootstrap官網就沒有加了

codepen
參考：bootstrap4